<template>
  <div class="login">
    <div class="animate__animated animate__bounce center ">
      <h2>用户登录</h2>
      <div style="text-align: center">
        <el-form style="margin-top: 50px">
          <el-form-item>
            <el-input readonly onfocus="this.removeAttribute('readonly')" value="" autocomplete="off" size="big" v-model="userInfo.username" placeholder="请输入用户名" style="width: 70%"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input readonly onfocus="this.removeAttribute('readonly')" value="" autocomplete="off" size="big" v-model="userInfo.password" type="password" placeholder="请输入密码" style="width: 70%"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="tologin" size="big" style="font-family:'title';background: rgba(0,0,0,.8);border-radius: 30px;width:100px;border: 0;color: #fff;font-size: 20px;margin-top: 30px">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
import request from "@/utils/request"
export default{
  data(){
    return{
      userInfo:{
        username:'',
        password:''
      }
    }
  },
  mounted() {
    request({
      url: '/prod-api/captcha?t=' + new Date().getTime().toString(),
      method: 'get',
    }).then(res=>{
      console.log(res,'fdfdf');
    })
  },
  methods:{
    ...mapActions('permission',['login']),
    tologin(){
      this.login(this.userInfo)
    }
  }
}
</script>
<style scoped lang="scss">
  .login{
    width: 100%;
    height: 100%;
    background: url("../../assets/img/0003229mRl4.jpg") no-repeat 100% 100%;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .center{
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background-image: linear-gradient(to right top, rgba(255,255,255,0.3), rgba(255,255,255,0.3));
      //box-shadow: 0 5px 15px rgba(20, 20, 20, 0.8);
      backdrop-filter: blur(10px) brightness(110%);
      h2{
        font-family: title;
        font-size: 40px;
        text-align: center;
        margin-top: 90px;
      }
    }
  }
  ::v-deep .el-input__inner::placeholder {
    color: black;
    text-align:center;
    font-size: 23px;
    font-family: title;
  }
  ::v-deep .el-input__inner{
    background: transparent;
    border: 0;
    border-bottom: 1px black solid;
    border-radius: 0;
    text-align: center;
    font-size: 20px;
    color: black;
  }
  /* 谷歌 */
  .el-input__inner::-webkit-input-placeholder {
    text-align:center;
    color: black;
    text-align:center;
    font-size: 20px;
    font-family: title;
  }
  /* 火狐 */
  .el-input__inner:-moz-placeholder {
    text-align:center;
    color: black;
    text-align:center;
    font-size: 20px;
    font-family: title;
  }
</style>